/* IMPORTANT:
   Tailwind's PostCSS processing (including the purge step) is triggered
   by matching this specific filename.
   If this file is renamed or moved, update the condition in postcss.config.js.
   When tailwind is removed entirely, delete the related PostCSS plugin there. */

@import 'css/style.css';

@import 'css/light.theme.css';
@import 'css/dark.theme.css';

/* React Table overrides. Delete this file once all react Table properties are ported over properly to avoid the use of !important*/
@import 'react-table-6/react-table.css';

/* React-vis */
@import 'react-vis/dist/style.css';


.theme-dark .react-select__option:hover,
.theme-dark .react-select__option:focus,
.theme-dark .react-select__option:active {
    background: var(--base-400);
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* reset the unthinking hardcoded resets of Tailwind Forms in v2 plugin,
   https://github.com/tailwindlabs/tailwindcss-forms/blob/master/src/index.js
*/
[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea,
select {
    font-size: 100%;
}

[type='checkbox'],
[type='checkbox'] {
    @apply w-3 h-3 rounded-sm;
}

.react-select__input input[type='text']:focus {
    box-shadow: none !important;
}

/* end reset of the Tailwind forms reset */

.sticky {
    position: sticky !important;
}

.content-box {
    background-clip: content-box;
}

.pills {
    @apply flex flex-col flex-auto rounded-sm border border-base-300 overflow-hidden !important;
}

@screen md {
    .pills {
        @apply flex-row !important;
    }
}

.shadow-sidepanel {
    box-shadow: 0 0 64px 30px hsla(224, 34%, 14%, 0.4);
}

.shadow-underline {
    box-shadow: inset 0 -1px 0px 0 hsla(0, 0%, 0%, 0.1);
}

.disabled {
    @apply opacity-50 cursor-not-allowed pointer-events-none !important;
}

.border-collapse {
    border-collapse: collapse;
}

[class~='flex-1'] {
    @apply min-h-0 !important;
    /* Firefox needs this property to properly scroll panels with flex/overflow. Tailwind throws an exception error when using
their built-in classes, so this is a workaround to `bundle` the Firefox fix with every `flex-1` class by default*/
}

.word-break {
    word-break: break-word;
}

.word-break-all {
    word-break: break-all;
}

ul,
ol,
li,
p,
span,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
    @apply break-words !important;
}

.react-modal-overlay {
    @apply fixed top-0 left-0 w-full h-full text-base !important;
    background-color: hsla(225, 41%, 32%, 0.82);
    z-index: 9000;
}

/* Specify PatternFly light-on-dark colors explicitly for toast because variables have light-on-dark colors in Masthead. */

.toast-selector {
    background-color: #ffffff;
    color: #151515;
    font-family: var(--pf-v5-global--FontFamily--sans-serif);
    font-size: var(--pf-v5-global--FontSize--sm);
}

.Toastify__close-button--default {
    color: #151515;
    opacity: 1;
}

.Toastify__progress-bar {
    display: none; /* Prevent axe DevTools issue: ARIA progressbar node must have an accessible name */
}

.pill {
    @apply select-none bg-base-200 cursor-pointer p-2 m-2 rounded-sm whitespace-nowrap flex-1 text-center text-xs text-base-500 font-600 !important;
}

.pill-active {
    @apply select-none cursor-pointer p-2 m-2 bg-base-300 rounded-sm whitespace-nowrap flex-1 text-center text-xs text-base-700 font-600 !important;
}

.transition {
    animation: fadein 0.25s ease-in;
}

.transition-out {
    animation: fadeout 0.25s ease-out;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.tab-row {
    box-shadow: inset 0 -1px 0 0 theme('colors.base-400'), 0 15px 30px 0 theme('colors.base-200');
}

.tab {
    box-shadow: inset -1px 0px 0px 0px theme('colors.base-400'),
        inset 0px -1px 0px 0px theme('colors.base-400');
}

.tab-active {
    box-shadow: inset 0px 2px 0px 0px theme('colors.primary-400'),
        inset -1px 0px 0px 0px theme('colors.base-400');
}

.pill:hover {
    @apply text-primary-500 !important;
}

.pill-active {
    @apply text-primary-500 !important;
}

.transform-rotate-half-turn {
    transform: rotate(0.5turn);
}

/* will clean this up at some point... */
.panel-actions:not(:empty) + div:before {
    @apply bg-base-300 absolute rounded-full;
    content: '';
    left: 9px;
    top: 50%;
    width: 2px;
    height: 50%;
    transform: translateY(-50%);
}

.close-button:before {
    display: none !important;
}

.navigation-gradient {
    height: 2px;
    background-image: linear-gradient(90deg, #d1a0ea 0%, #a3acff 44%, #78effb 99%);
    top: 0;
    z-index: 2;
    width: 100%;
}

.navigation-panel {
    position: absolute;
    left: 133px;
    z-index: 1001;
    top: 0;
    height: 100%;
    background-color: hsla(0, 0%, 21%, 0.85);
}

.navigation-panel ul {
    width: 270px;
}

/* Collapsible CSS */

.Collapsible__trigger.is-open + .Collapsible__contentOuter {
    overflow: visible !important;
}

/* React Select CSS */

.react-select__single-value {
    color: inherit !important;
}

.react-select__option {
    @apply px-2 cursor-pointer !important;
}

.react-select__menu {
    @apply m-0 !important;
}

.react-select__menu-notice--no-options {
    @apply text-left !important;
}

.react-select__control--is-focused,
.react-select__control--is-focused:hover {
    @apply border-base-400 !important;
}

.react-select__value-container--is-multi {
    @apply pb-0 pl-1 !important;
}

.react-select__input input {
    @apply text-base-600 font-600 !important;
    margin-left: -2px !important;
}

.react-select__indicators {
    @apply cursor-pointer;
}

.react-select__multi-value__label {
    @apply px-2 !important;
}

.react-select__multi-value__remove {
    @apply cursor-pointer;
}

.react-select__multi-value__remove:hover {
    @apply shadow-inner;
}

.react-select__menu-list {
    @apply p-0 !important;
}

.react-select__placeholder {
    color: var(--base-500) !important;
}

.severity-tile {
    background: hsla(0, 0%, 100%, 0.19);
}

.cursor-text {
    cursor: text !important;
}

.__react_component_tooltip.type-dark.place-top:after {
    border-top-color: inherit !important;
}

.btn-class {
    @apply inline-flex px-2 rounded-sm text-center items-center min-w-16 justify-center border-2 !important;
    line-height: 14px; /* required because we were relying on the Chrome browser default of 14px earlier */
}

.btn-sm {
    @apply btn-class py-1 text-sm !important;
}

.btn {
    @apply btn-class py-2 !important;
}

.btn-icon {
    @apply flex py-2 px-2 rounded-sm text-center items-center justify-center bg-base-200 border !important;
}

.btn-success {
    @apply text-success-700 border-success-500 bg-success-200 !important;
}

.btn-success:hover {
    @apply border-success-500 bg-success-300 text-success-800 !important;
}

.btn-alert {
    @apply text-alert-100 border-alert-600 bg-alert-600 !important;
}

.btn-alert:hover {
    @apply text-alert-100 border-alert-700 bg-alert-700 !important;
}

.btn-primary {
    @apply border-primary-300 text-primary-600 !important;
}

.btn-primary:hover {
    @apply text-primary-600 bg-primary-100 border-primary-400 !important;
}

.btn-tertiary {
    @apply border-tertiary-700 text-tertiary-700 !important;
}

.btn-tertiary:hover {
    @apply text-tertiary-700 bg-base-300 border-tertiary-600 !important;
}

.btn-base {
    @apply text-base-600 border-base-400 bg-base-100 !important;
}

.btn-base:hover {
    @apply border-base-400 bg-base-200 text-base-700 !important;
}

/* React Select override */
.hide-dropdown > div:last-child {
    @apply hidden;
}

.ReactTable .rt-table {
    overflow: overlay !important;
}

.ReactTable .rt-noData {
    @apply bg-base-100 text-base-600 !important;
    transition: none !important;
}

/* .rt-table:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.16) 1%, #FFFFFF 20px), linear-gradient(180deg, rgba(255,255,255,0.16) 1%, #FFFFFF 20px);
  background-size: 20px 100%, 100% 20px;
  background-repeat: no-repeat, no-repeat;
  width: 100%;
  background-position: right, bottom;
} */

.ReactTable .-pagination {
    @apply shadow-none border-t shadow-underline pt-2 pb-2 pl-0 pr-0 !important;
}

.ReactTable input[type='checkbox'] {
    transform: scale(1.2);
    cursor: pointer;
}

.ReactTable input[type='checkbox']:hover,
.ReactTable input[type='checkbox']:focus {
    @apply shadow;
}

.ReactTable .rt-thead {
    position: sticky;
    @apply top-0 !important;
    z-index: 5 !important;
}

.ReactTable .rt-tbody {
    overflow: initial !important;
}

.ReactTable .rt-thead .rt-th:focus {
    @apply outline-none !important;
}

.ReactTable .rt-thead.-header {
    @apply shadow-none !important;
}

.ReactTable .rt-thead.-header .rt-tr {
    box-shadow: -10px 0 0 var(--base-100), 10px 0 0 var(--base-100),
        0 2px 8px 0 hsla(230, 50%, 70%, 0.25) !important;

    @apply bg-base-100 !important;
}

.ReactTable .rt-th {
    @apply bg-base-100 !important; /* th also needs background for horizontal scrolling beyond tr width */
}

.theme-dark .ReactTable .rt-thead.-header .rt-tr {
    @apply border-b border-base-200 bg-base-0 !important;
    box-shadow: -10px 0 0 var(--base-100), 10px 0 0 var(--base-100), 0 2px 8px 0 hsl(233, 25%, 15%) !important;
}

.theme-dark .ReactTable .rt-th {
    @apply bg-base-0 !important; /* th also needs background for horizontal scrolling beyond tr width */
}

.theme-dark .widget .ReactTable .rt-thead.-header .rt-tr,
.theme-dark .widget .ReactTable .rt-th {
    @apply bg-base-100 !important;
}

.ReactTable .rt-thead .rt-th.-sort-desc,
.ReactTable .rt-thead .rt-th.-sort-asc {
    @apply shadow-none !important;
}

.ReactTable .rt-thead .rt-th.-sort-desc div:after {
    content: ' ↓';
    position: absolute;
    margin-left: 4px;
}

.ReactTable .rt-thead .rt-th.-sort-asc div:after {
    content: ' ↑';
    position: absolute;
    margin-left: 4px;
}

.ReactTable .rt-tbody .rt-tr {
    @apply min-h-12 bg-transparent !important;
}

.ReactTable .rt-expandable {
    @apply flex;
}

.ReactTable .rt-tbody .rt-tr .rt-td {
    box-shadow: 0px -1px 0 0 theme('colors.base-300'), inset 0px -1px 0 0 theme('colors.base-300');
    @apply whitespace-normal !important;
}

.ReactTable.expanded .rt-tbody .rt-tr .rt-td {
    box-shadow: 0px -1px 0 0 theme('colors.base-300'),
        inset 0px -1px 0 -1px theme('colors.base-300');
    @apply whitespace-normal !important;
}

.ReactTable .rt-tbody .rt-tr-group:hover {
    @apply bg-base-200 !important;
    z-index: 3 !important;
    box-shadow: 0px -2px 0 0 theme('colors.base-400'),
        inset 0px -3px 0 -1px theme('colors.base-400');
}

.ReactTable .rt-tbody .rt-tr.row-active .rt-td,
.ReactTable .rt-tbody .rt-tr.row-active:hover .rt-td {
    @apply bg-tertiary-200 !important;
    box-shadow: 0px -1px 0 0 theme('colors.tertiary-400'),
        inset 0px -1px 0 0 theme('colors.tertiary-400');
    z-index: 4 !important;
}

.ReactTable.expanded .rt-tbody .rt-tr {
    @apply pb-12 !important;
}

.ReactTable .rt-tbody .rt-tr-group {
    @apply flex-grow-0 cursor-pointer relative !important;
    border: none !important;
}

.ReactTable .rt-tr {
    @apply relative !important;
}

.ReactTable .rt-tbody .rt-td.rt-tr-actions {
    position: sticky !important;
    top: auto;
    right: 10px !important;
    z-index: 1;
    width: 0 !important;
    overflow: inherit !important;
    flex: 0 !important;
    @apply flex-row-reverse left-0 min-w-0 m-0 !important;
}

.ReactTable .rt-tr:hover .rt-tr-actions {
    @apply flex !important;
}

.ReactTable .-previous .-btn,
.ReactTable .-next .-btn {
    @apply bg-primary-100 rounded-none text-primary-600 !important;
}

.ReactTable .-previous .-btn:hover,
.ReactTable .-next .-btn:hover {
    @apply bg-primary-300 text-base-100 rounded-none !important;
}

/* will clean up and refactor all selectors at some point */

.ReactTable .rt-thead .rt-tr {
    min-width: min-content !important;
}

.ReactTable .rt-tbody .rt-td.sticky-column {
    background: inherit !important;
    position: sticky !important;
    left: 0;
    z-index: 1;
    box-shadow: 0px -1px 0 0 theme('colors.base-300'), inset 0px -1px 0 0 theme('colors.base-300'),
        11px 0 8px -4px theme('colors.base-100');
}

.ReactTable .rt-thead .rt-th.sticky-column {
    background: inherit !important;
    position: sticky !important;
    left: 0;
    z-index: 1 !important;
    box-shadow: 11px 0 8px -4px theme('colors.base-100');
}

.ReactTable .rt-thead .rt-th.sticky-column:hover {
    @apply bg-primary-200 !important;
}

.ReactTable .rt-tbody .rt-tr.row-active .rt-td.sticky-column,
.ReactTable .rt-tbody .rt-tr.row-active:hover .rt-td.sticky-column,
.ReactTable .rt-tbody .rt-tr.row-active .rt-td:first-child {
    box-shadow: 0px -1px 0 0 theme('colors.tertiary-400'),
        inset 0px -1px 0 0 theme('colors.tertiary-400'),
        11px 0 8px -4px theme('colors.tertiary-200');
    z-index: 4 !important;
}

.ReactTable .rt-tbody .rt-td.sticky-column.left-checkbox-offset,
.ReactTable .rt-thead .rt-th.sticky-column.left-checkbox-offset {
    left: 28px !important;
}

.cve-table .rt-table .rt-tbody,
.cve-table .rt-table .rt-thead,
.dockerfile-table .rt-table .rt-tbody,
.dockerfile-table .rt-table .rt-thead {
    @apply p-0 !important;
}

.cve-table .rt-tbody .rt-tr,
.cve-table .rt-thead .rt-tr,
.dockerfile-table .cve-table .rt-tbody .rt-tr,
.dockerfile-table .cve-table .rt-thead .rt-tr {
    @apply min-h-0 !important;
}

.cve-table .rt-thead .rt-th:first-child,
.dockerfile-table .cve-table .rt-thead .rt-th:first-child {
    @apply shadow-none !important;
}

.table-reset-padding .ReactTable .rt-tbody {
    @apply p-0 !important;
}

.overflow-overlay {
    overflow: overlay;
}

.redoc-wrap {
    /* TODO: discover a way to export CSS vars from our tailwind-config package
       for now, repeating light theme colors here,
       because Redoc components unreadable with classic dark theme,
       their styles need to be tuned
    */

    --base-100: hsla(225, 0%, 100%, 1);
    --base-200: hsla(225, 45%, 98%, 1);
    --base-300: hsla(225, 43%, 94%, 1);
    --base-400: hsla(225, 44%, 87%, 1);
    --base-500: hsla(225, 17%, 63%, 1);
    --base-600: hsla(225, 14%, 43%, 1);
    --base-700: hsla(225, 18%, 32%, 1);
    --base-800: hsla(225, 24%, 22%, 1);
    --base-900: hsla(225, 27%, 16%, 1);

    --primary-100: hsla(225, 100%, 99%, 1);
    --primary-200: hsla(225, 100%, 96%, 1);
    --primary-300: hsla(225, 80%, 92%, 1);
    --primary-400: hsla(225, 68%, 78%, 1);
    --primary-500: hsla(225, 65%, 68%, 1);
    --primary-600: hsla(225, 90%, 67%, 1);
    --primary-700: hsla(225, 51%, 52%, 1);
    --primary-800: hsla(225, 37%, 36%, 1);
    --primary-900: hsla(225, 28%, 21%, 1);

    --secondary-100: hsla(257, 45%, 98%, 1);
    --secondary-200: hsla(257, 100%, 96%, 1);
    --secondary-300: hsla(257, 81%, 90%, 1);
    --secondary-400: hsla(257, 68%, 78%, 1);
    --secondary-500: hsla(257, 66%, 68%, 1);
    --secondary-600: hsla(257, 100%, 67%, 1);
    --secondary-700: hsla(257, 50%, 52%, 1);
    --secondary-800: hsla(257, 37%, 36%, 1);
    --secondary-900: hsla(257, 28%, 21%, 1);

    --tertiary-100: hsla(210, 45%, 98%, 1);
    --tertiary-200: hsla(210, 100%, 96%, 1);
    --tertiary-300: hsla(210, 81%, 90%, 1);
    --tertiary-400: hsla(210, 68%, 78%, 1);
    --tertiary-500: hsla(210, 66%, 68%, 1);
    --tertiary-600: hsla(210, 93%, 58%, 1);
    --tertiary-700: hsla(210, 47%, 48%, 1);
    --tertiary-800: hsla(210, 37%, 36%, 1);
    --tertiary-900: hsla(210, 28%, 21%, 1);

    --accent-100: hsla(293, 45%, 98%, 1);
    --accent-200: hsla(293, 100%, 96%, 1);
    --accent-300: hsla(293, 80%, 90%, 1);
    --accent-400: hsla(293, 64%, 80%, 1);
    --accent-500: hsla(293, 62%, 71%, 1);
    --accent-600: hsla(293, 68%, 62%, 1);
    --accent-700: hsla(293, 34%, 50%, 1);
    --accent-800: hsla(293, 34%, 37%, 1);
    --accent-900: hsla(293, 28%, 21%, 1);

    --success-100: hsla(155, 45%, 98%, 1);
    --success-200: hsla(155, 100%, 96%, 1);
    --success-300: hsla(155, 81%, 90%, 1);
    --success-400: hsla(155, 68%, 78%, 1);
    --success-500: hsla(155, 66%, 68%, 1);
    --success-600: hsla(155, 52%, 46%, 1);
    --success-700: hsla(155, 62%, 33%, 1);
    --success-800: hsla(155, 37%, 31%, 1);
    --success-900: hsla(155, 28%, 21%, 1);

    --warning-100: hsla(39, 45%, 98%, 1);
    --warning-200: hsla(39, 100%, 96%, 1);
    --warning-300: hsla(39, 80%, 90%, 1);
    --warning-400: hsla(39, 64%, 80%, 1);
    --warning-500: hsla(39, 62%, 71%, 1);
    --warning-600: hsla(39, 100%, 66%, 1);
    --warning-700: hsla(39, 38%, 52%, 1);
    --warning-800: hsla(39, 34%, 37%, 1);
    --warning-900: hsla(39, 28%, 21%, 1);

    --caution-100: hsla(16, 45%, 98%, 1);
    --caution-200: hsla(16, 100%, 96%, 1);
    --caution-300: hsla(16, 81%, 90%, 1);
    --caution-400: hsla(16, 68%, 78%, 1);
    --caution-500: hsla(16, 66%, 68%, 1);
    --caution-600: hsla(16, 87%, 65%, 1);
    --caution-700: hsla(16, 47%, 48%, 1);
    --caution-800: hsla(16, 37%, 36%, 1);
    --caution-900: hsla(16, 28%, 21%, 1);

    --alert-100: hsla(341, 45%, 98%, 1);
    --alert-200: hsla(341, 100%, 96%, 1);
    --alert-300: hsla(341, 81%, 90%, 1);
    --alert-400: hsla(341, 68%, 78%, 1);
    --alert-500: hsla(341, 66%, 68%, 1);
    --alert-600: hsla(341, 96%, 67%, 1);
    --alert-700: hsla(341, 50%, 52%, 1);
    --alert-800: hsla(341, 37%, 36%, 1);
    --alert-900: hsla(341, 28%, 21%, 1);
    @apply bg-base-100 !important;
}

.redoc-wrap,
.redoc-wrap .menu-content {
    @apply h-full !important;
}

.redoc-wrap .api-content {
    @apply overflow-auto !important;
}

/* CHECKBOX TOGGLE SWITCH */
.form-switch,
.form-switch-reverse {
    @apply relative select-none w-12 mr-2 leading-normal;
}

.form-switch-checkbox {
    @apply hidden;
}

.form-switch-checkbox:disabled + .form-switch-label {
    @apply opacity-50;
}

.form-switch-checkbox:disabled + .form-switch-label:before {
    @apply bg-base-200;
}

.form-switch-label {
    @apply block overflow-hidden cursor-pointer border rounded h-6;
}

.form-switch .form-switch-label,
.form-switch-reverse .form-switch-checkbox:checked + .form-switch-label {
    @apply bg-base-600 shadow-inner;
}

.form-switch-label:before {
    @apply absolute block bg-base-100 inset-y-0 w-6 border rounded -ml-1;

    right: 50%;
    content: '';
}

.form-switch .form-switch-checkbox:checked + .form-switch-label,
.form-switch-reverse .form-switch-checkbox + .form-switch-label {
    @apply bg-primary-400 shadow-none;
}

.form-switch-reverse .form-switch-checkbox:checked + .form-switch-label:before {
    right: 50%;
}

.form-switch .form-switch-checkbox:checked + .form-switch-label:before,
.form-switch-reverse .form-switch-checkbox + .form-switch-label:before {
    @apply right-0;
}

/* TOGGLE SWITCH */
/* rounded */
/* for the difference between this switch, and the form-switch above,
   see: https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8 */
.toggle-switch {
    @apply relative select-none w-12 leading-normal;
}
.toggle-switch-small {
    @apply w-8;
}
.toggle-switch-checkbox {
    /* we cannot hide with @apply, or toggle switch will not be keyboard-focusable */
    left: -9999px;
    position: absolute;
}
.toggle-switch-label {
    @apply block overflow-hidden cursor-pointer bg-transparent border rounded-full h-6 shadow-inner;

    transition: background-color 0.2s ease-in;
}
.toggle-switch-small .toggle-switch-label {
    @apply h-4;
}
.toggle-switch-label:before {
    @apply absolute block bg-base-100 inset-y-0 w-6 border rounded-full -ml-1;

    content: '';
    right: 50%;
    transition: all 0.2s ease-in;
}
.toggle-switch-small .toggle-switch-label:before {
    @apply w-4;
}

.toggle-switch-checkbox:checked + .toggle-switch-label,
.toggle-switch-checkbox:checked + .toggle-switch-label:before {
}
.toggle-switch-checkbox:checked + .toggle-switch-label {
    @apply bg-success-500;
}
.toggle-switch-alert .toggle-switch-checkbox:checked + .toggle-switch-label {
    @apply bg-alert-600;
}
.toggle-switch-checkbox:checked + .toggle-switch-label:before {
    @apply right-0;
}

.toggle-switch-checkbox:disabled + .toggle-switch-label {
    @apply opacity-50;
}

.toggle-switch-checkbox:disabled + .toggle-switch-label:before {
    @apply bg-base-200;
}

/*
 * Override overflow-y: auto which causes axe DevTools to report:
 * Scrollable region must have keyboard access
 */
.rv-discrete-color-legend {
    overflow-y: hidden;
}

/* Legend */
.horizontal-bar-legend .rv-discrete-color-legend-item {
    padding: 3px 4px;
}

.horizontal-bar-legend {
    border-top: 1px solid var(--base-300);
    padding: 2px 0;
}
/* Legend color swatch */
.horizontal-bar-legend .rv-discrete-color-legend-item__color__path {
    stroke-width: 3px;
    stroke-linecap: round;
}
/* Legend item text */
.horizontal-bar-legend
    .rv-discrete-color-legend-item.horizontal
    .rv-discrete-color-legend-item__title {
    display: inline-block;
    font-size: 0.8em;
    padding-left: 5px;
}

/* widget detail */
.widget-detail-bullet {
    position: relative;
    @apply py-2 px-1;
}

.widget-detail-bullet::before {
    position: absolute;
    left: -17px;
    content: '';
    top: 11px;
    @apply rounded-full border-2 border-base-400 bg-base-100;
    height: 9px;
    width: 9px;
}

.before:before {
    content: ' ';
}

.after:after {
    content: ' ';
}

/** Widget arrows */
.arrow-up {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;

    border-bottom: 8px solid var(--primary-800);
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;

    border-top: 8px solid var(--primary-800);
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;

    border-left: 8px solid var(--primary-800);
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--base-400);
}

.table-group {
    box-shadow: inset 0px -1px 0px 0px var(--base-400), 0 -1px 0 0 var(--base-400);
}

.table-group:hover {
    box-shadow: inset 0 -1px 0px 0px var(--tertiary-400), 0 -1px 0 0 var(--tertiary-400);
}

.table-group-active {
    box-shadow: 0 1px 0px 0px var(--tertiary-500), 0 -1px 0 0 var(--tertiary-500);
}

.horizontal-bar-responsive .rv-xy-plot {
    @apply w-full h-full !important;
}

.horizontal-bar-responsive .rv-xy-plot__inner {
    @apply max-w-full !important;
    max-height: 272px !important;
}

.rv-xy-plot__grid-lines__line,
.rv-xy-plot__axis__line {
    stroke: var(--base-300) !important;
    stroke-width: 1px !important;
}

.graph-bottom-border:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--base-300);
    bottom: 27px;
    z-index: 1;
    left: 0;
}

.rv-discrete-color-legend-item__title {
    @apply text-base-500 font-700;
}

.horizontal-bar-responsive .horizontal-bar-legend {
    @apply items-center justify-between flex absolute w-full;
    bottom: -13px;
    padding-top: 3px;
}

.pin-center {
    top: 50%;
    left: 50%;
}

/* multi-line truncation:
   (not available in Tailwind)
   see https://css-tricks.com/almanac/properties/l/line-clamp/
*/
.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-bottom: 1px; /* necessary to fix bug where descenders are cut off */
}

.pdf-export .line-clamp {
    display: flex;
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
    overflow: initial;
    padding-bottom: 0; /* necessary to fix bug where descenders are cut off */
}

.drag-grip {
    width: 18px;
    height: 40px;
    overflow: hidden;
    line-height: 4px;
    padding-top: 2px;
    padding-left: 2px;
    cursor: move;
    margin-right: 0.3em;
    font-size: 10px;
    font-family: sans-serif;
    letter-spacing: 1px;
    color: var(--base-800);
}
.drag-grip::after {
    content: '... ... ... ... ... ... ...';
}

.border-spacing-0 {
    border-spacing: 0;
}

s::before,
s::after {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

s::before {
    content: ' [start of stricken text] ';
}

s::after {
    content: ' [end of stricken text] ';
}

.decoration-clone {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.leading-looser {
    line-height: 1.75rem;
}
